<template>
  <div class="da">
    <!-- 系统优化 -->
    <el-card :header-style="{background:'pink'}">
      <div slot="header" class="clearfix">
        <span>刷新缓存</span>
      </div>
      <div class="text item">刷新并重建缓存，让系统保持最优的状态</div>
      <el-button
        :plain="true"
        @click="shuaxin"
        style="margin-top:60px;float: right;margin-bottom:10px;"
      >刷新缓存</el-button>
    </el-card>
    <el-card class="xia">
      <div slot="header" class="clearfix">
        <span>优化磁盘空间</span>
      </div>
      <div class="text item">移除系统的临时数据，释放更多磁盘空间</div>
      <el-button
        :plain="true"
        @click="youhua"
        style="margin-top:60px;float: right;margin-bottom:10px;"
      >优化磁盘空间</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    shuaxin() {
      this.$notify({
        title: '成功',
        message: '刷新缓存成功',
        type: 'success',
        duration: 2000
      })
    },
    youhua() {
      this.$notify({
        title: '成功',
        message: '优化磁盘空间成功',
        type: 'success',
        duration: 2000
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.da {
  width: 700px;
  height: 600px;
  margin: 30px;
  font-size: 14px;
}

.xia {
  margin-top: 40px;
}
</style>
